<template>
  <div class="my-exam">     
    <tab class="list-tab" 
        custom-bar-width="1.7rem"
        bar-active-color="#172F6D"
        >
      <tab-item selected @on-item-click="onItemClick(2)">成年</tab-item>
      <tab-item @on-item-click="onItemClick(1)">少年</tab-item>
      <tab-item @on-item-click="onItemClick(0)">儿童</tab-item>
    </tab>
    <div class="ad-img" @click="routerClick">
      <img src="@/assets/ceshijieguo01.png" alt="">
      <div class="cr" v-if="article_type == 2">
        <p class="cr-title">今日剩余{{num}}次</p>
        <p class="cr-tip">每日都可重新测试哦~</p>
      </div>      
      <p class="title" v-else>现在去测试</p>
    </div>    
    <div class="list"><!-- { path: '/examResult',query:{order_id: item.id, article_type: item.type}} -->
      <div class="item" v-for="(item,index) in lists" :key="index" @click="routerResult(item)">
        <span v-if="item.host">
          <img :src="baseUrl+item.host_img" class="item-img" alt="">
          <img :src="baseUrl+item.deputy_img" class="item-img" alt="">
        </span>
        <span v-else>
          <img src="@/assets/ceshijieguo03.png" class="none-img" alt="">
        </span>        
        <div class="cons">
          <p class="title"  v-if="item.host">{{item.host_name}}+{{item.deputy_name}}属性</p>
          <p class="title" v-else>无结果</p>
          <p class="time">{{item.addtime}}</p>
        </div>
        <img src="@/assets/bianjiziliao02.png" class="arrow" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  import {myexam, baseUrl} from '@/api/api'
  import { Tab, TabItem } from 'vux'

  export default {
    components: {
      Tab,
      TabItem,
    },
    data () {
      return {
        lists:[],
        num:5,
        is_check: true,
        article_type:2,
        baseUrl,
      }
    },
    created () {
      this.exam()
    },
    methods: {
      routerClick() {
        if(this.article_type == '2'){
          this.router({path: 'talent', query:{article_type: 'adult'}})
        }else{
          this.router({path: './home'});
        }
      },
      router (path) {
        this.$router.push(path)
      },
      exam(){
        myexam(this.article_type).then((res) =>{
          console.log(res)
          this.lists=res.data.data.list.list
          console.log(this.lists)
          this.num=res.data.data.list.counts_nums
        }).catch((err) => {
          console.dir(err)
        })
      },
      onItemClick (index) {
        this.article_type = index
        this.exam()
      },
      routerResult(item) {
        if(this.article_type == '2'){
          this.router({ path: '/examResult',query:{order_id: item.id, article_type: item.type}})
        }else{
          this.router({ path: '/examResultChild',query:{order_id: item.id, article_type: item.type}});
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
.my-exam
  width 100%
  min-height 100vh
  background-color #fff
  .list-tab
    padding-top 5rem
    .vux-tab-container
      height 5rem
      .vux-tab-item.vux-tab-selected
        font-weight bold
      .vux-tab-item
        color #000
        font-size 1.6rem
        font-weight 400
  .ad-img
    padding 2rem 1.5rem
    box-sizing border-box
    position relative
    .title
      line-height 8rem
      top 2rem
      font-size 1.7rem
      font-weight bold
    p
      position absolute
      left 0
      width 100%
      color #F5F5F5
      text-align center
    .cr-title
      font-weight bold
      font-size 1.7rem
      top 3.8rem
      line-height 1.7rem
      height 1.7rem
    .cr-tip
      font-weight 500
      top 6.6rem
      font-size 1.1rem
      height 1.2rem
      line-height 1.2rem
  .list
    .item
      background-color #F5F6FA
      height 7rem
      margin 0 1.5rem
      position relative
      border-radius .3rem
      margin-bottom 1.5rem
      span
        width 9rem
        text-align center
        position absolute
        left 0
        top 1.6rem
        img
          display inline-block
        .item-img
          width 4rem
          height 4rem
          margin-left -2.5rem
          &:first-child
            margin-left .2rem
        .none-img
          width 4rem
      .cons
        position absolute
        left 9rem
        .title
          color #333
          font-size 1.7rem
          font-weight 500
          line-height 1.7rem
          height 1.7rem
          margin-bottom 1rem
          margin-top 1.4rem
        .time
          font-size 1.2rem
          color #999
          font-weight 500
          line-height 1.2rem
          height 1.2rem
      .arrow
        position absolute
        right 1.5rem
        width .6rem
        top 3rem
</style>
